<template>
  <view class="wrap" :class="'theme-'+theme">
	<view class="addTitle">
      <view class="titleDetail">
        <view class="">
			<image src="../../static/newh5/fanhui.png"
			class="yticon"
			style="width: 13px;height: 20px;color:black"
			@click="returnIndex()"
			></image>
        </view>
        <view class="titleText">
          <b>采购订单审批单</b>
        </view>
        <view class=""  style="color: #269cd3">
        </view>
      </view>
    </view>
    <u-tabs-swiper
    :active-color="themeColor"
    ref="tabs"
    :active-item-style="activeItemStyle"
    :list="list" :current="current"
    @change="onTabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
    <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @change="onSwiperChange" @animationfinish="animationfinish">
        <swiper-item style="overflow-y:auto;" class="swiper-item">
          <view class="u-basic-info">
            <u-row style="font-size:34rpx;font-weight: bold">审批编号：{{orderApply.id}}</u-row>
            <u-row style="padding-top: 10rpx">申请人：{{orderApply.creater}}</u-row>
            <u-row style="padding-top: 10rpx">申请日期：{{orderApply.createTime}}</u-row>
            <u-row style="padding-top: 10rpx">申请部门：{{orderApply.createrCurrDept}}</u-row>
            <u-row style="padding-top: 10rpx">供应商：{{ orderApply.supplierName }}<u-image v-if="orderApply.productLogo!==''&&orderApply.protocolType==='eplus'" :src="orderApply.productLogo" width="128rpx" height="52rpx"></u-image></u-row>
            <u-row style="padding-top: 10rpx">采购说明：{{orderApply.purchaseReason||'无'}}</u-row>
          </view>
          <view v-if="orderApply.isOpenBudget && budgetData.budgetList!=undefined&& budgetData.budgetList.length>0">
            <view class="card-title">--预算信息--</view>
            <view class="list b-b" v-for="item in budgetData.budgetList" :key="item.id">
              <view class="wrapper">
                <view class="address-box">
                  <text class="address" style="font-weight: bold;font-size: 32rpx">{{item.budgetName}}</text>
                </view>
                <view class="address-box">
                  <text class="address">剩余数量:{{  item.budgetControllerType.indexOf('02') != -1?item.budgetNum:'--' }} 使用数量:{{item.num}}</text>
                </view>
                <view class="u-box">
                  <text class="name">可用金额:￥{{item.budgetBalance|twoBitMoney}}</text>
                  <text class="mobile" v-if="item.budgetControllerType.indexOf('01') != -1">使用金额:￥{{ item.amount|twoBitMoney }}</text>
                  <text class="mobile" v-else>使用金额:￥--</text>
                </view>
              </view>
              <u-icon name="arrow-right" size="40" color="#909399" @click="goDetailList(item)"></u-icon>
            </view>
            <u-cell-item v-if="budgetData.budgetList.length>0" center :is-link="true" index="index"
              :label-style="labelStyle" :title-style="titleStyle" :arrow="true" :border-bottom="false"
              :title="refBudget" :label="noneRefBudget" :value="total" bg-color="#ffffff" @click="noRelationBudgetProductVisible = true">
            </u-cell-item>
          </view>

          <view class="card-title">--商品信息--</view>
          <view class="order">
          <view  v-for="(res, index) in orderItem" :key="res.id">
            <view class="top">
              <view class="left">
                <u-icon name="list-dot" :size="30" color="rgb(94,94,94)"></u-icon>
                <view class="store">{{res.catalogFullName}}</view>
              </view>
            </view>
            <view class="item" v-for="(item, index) in res.products" :key="index" @click="doProductDetail(item.id)">
              <view class="left"><image :src="item.thumbnail" @error="item.thumbnail = errorImgUrl" mode="aspectFill"></image></view>
              <view class="content">
                <view class="title u-line-3">{{ item.name }}</view>
              </view>
              <view class="right">
                <view class="price">
                  ￥{{ item.salePrice|twoBitMoney }}
                </view>
                <view class="number">x{{ item.num }}</view>
              </view>
            </view>
          </view>
          <view class="total">
            共<text class="num">{{ summary.num }}</text>
            件商品 合计:
            <text class="total-price">
              ￥{{ summary.totalPrice|twoBitMoney }}元
            </text>
          </view>
          </view>
          <view class="card-title">--金额信息--</view>
          <view class="settlement-section">
            <view class="yt-list">
              <view class="yt-list-cell" style="padding-left: 30rpx;line-height: 60rpx;padding-top: 0;">
                <text class="all">共{{ summary.num }}件商品</text>
              </view>
              <view class="yt-list-cell" style="padding-left: 30rpx;line-height: 60rpx;padding-top: 0;">
                <text class="cell-tit clamp">商品总额</text>
                <text class="cell-tip red">￥{{summary.totalPrice|twoBitMoney}}</text>
              </view>
              <view class="yt-list-cell" style="padding-left: 30rpx;line-height: 60rpx;">
                <text class="cell-tit clamp">运费总计</text>
                <text class="cell-tip red">￥{{summary.freight|twoBitMoney}}</text>
              </view>
              <view v-if="orderApply.confService" class="yt-list-cell" style="padding-left: 30rpx;line-height: 60rpx;">
                <text class="cell-tit clamp">服务费</text>
                <text class="cell-tip red">￥{{orderApply.serviceFee|twoBitMoney}}</text>
              </view>
              <view v-if="orderApply.confService" class="yt-list-cell" style="padding-left: 30rpx;line-height: 60rpx;">
                <text class="cell-tit clamp">优惠金额</text>
                <text class="cell-tip red">-￥{{orderApply.preferentialFee|twoBitMoney}}</text>
              </view>
              <view class="yt-list-cell" style="padding-left: 30rpx;line-height: 60rpx;">
                <text class="cell-tit clamp">订单总金额</text>
                <text class="cell-tip red">￥{{summary.amount|twoBitMoney}}</text>
              </view>
              <view class="yt-list-cell" style="padding-left: 30rpx;line-height: 60rpx;">
                <text class="cell-tit clamp">节约金额</text>
                <text class="cell-tip red">￥{{summary.amountDesc|twoBitMoney}}</text>
              </view>
            </view>
          </view>
        </swiper-item>

        <swiper-item style="overflow-y:auto;" >
          <scroll-view scroll-y @scrolltolower="reachBottom">
            <u-time-line class="apply-log-container">
              <u-time-line-item v-for="item in dealLogs" :key="item.actInstId">
                <template v-slot:node>
                  <view class="u-node" :class="item.activityState==='F'?'current':'none'">
                    <u-icon name="checkmark-circle-fill" color="#fff" :size="24"></u-icon>
                  </view>
                </template>
                <template v-slot:content>
                  <view class="log">
                    <view class="u-order-title">{{item.displayName}}</view>
                    <view class="u-order-font">审核人：{{item.dealUsername}}</view>
                    <view class="u-order-font">所属部门：{{item.dealDeptName}}</view>
                    <view class="u-order-font">处理状态：{{item.activityState==='F'? "处理完成" : "处理中"}}</view>
                    <view class="u-order-time">处理时间：{{item.createTime}}</view>
                  </view>
                </template>
              </u-time-line-item>
            </u-time-line>
          </scroll-view>
        </swiper-item>
      </swiper>

    <u-popup border-radius="10" v-model="showPopup"
               @close="close" @open="open" :mode="mode"
               length="70%" :mask="mask"
               :closeable="closeable"
               :close-icon-pos="closeIconPos"
      >
        <view class="uni-tip" style="width: 100% !important;">
          <text class="uni-tip-title">审批意见</text>
          <view class="popup-content">
            <u-input type="textarea" v-model="approveData.dealContent" placeholder="请输入审批意见" :focus="true" :border="true" :height="150" :auto-height="true"></u-input>
          </view>
          <view class="uni-tip-group-button">
            <text class="uni-tip-button" :disabled="optionDisabled" @click="showPopup = false">取消</text>
            <text class="uni-tip-button confirm" :disabled="optionDisabled" @click="doApprove()">确定</text>
          </view>
        </view>
      </u-popup>

    <!--已关联商品列表，-->
    <u-popup border-radius="10" v-model="relationBudgetProductsVisible"
             mode="bottom" :mask="true"
             :closeable="false"  >
      <u-tabs-swiper :show-bar="false" active-color="#fa436a" ref="tabs"
                     :active-item-style="activeItemStyle"
                     :list="refProduceList" :current="current" @change="onTabsChange"
                     :is-scroll="false"></u-tabs-swiper>
      <swiper class="product-box" :current="swiperCurrent" @transition="transition" @change="onSwiperChange" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <u-empty v-if="!(relationBudgetProducts===undefined)&&relationBudgetProducts.length===0" mode="order" text="暂无可关联商品" icon-size="80">
          </u-empty>
          <view class="order" v-for="(item,index) in relationBudgetProducts" :key="index">
            <view class="item">
              <view class="left"><image :src="item.productThumbnail" @error="item.productThumbnail = errorImgUrl" mode="aspectFill"></image></view>
              <view class="content">
                <view class="title u-line-3">{{ item.productName }}</view>
              </view>
              <view class="right">
                <view class="price">
                  ￥{{item.salePrice | money}}
                </view>
                <view class="number">x{{ item.num }}</view>
              </view>
            </view>
            <view class="totalPrice">
              <view class="combine" v-if="preferential">小计(含服务费和优惠价):<view style="color: #fa436a;display: inline">￥{{item.num * (item.salePrice+item.serviceFee-item.preferentialFee)+item.showFreight | twoBitMoney}}{{item.showFreight >0 ?'（含运费）':''}}</view></view>
              <view class="combine" v-else>小计:<view style="color: #fa436a;display: inline">￥{{getTotalPrice(item)}}{{item.showFreight >0 ?'（含运费）':''}}</view></view>
              <view class="uni-num-box">
                <view>已关联数量:<view style="display: inline;font-size: 32rpx;font-weight: bold">{{ item.relationNum }}</view></view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </u-popup>

    <!--未关联商品列表，-->
    <u-popup border-radius="10" v-model="noRelationBudgetProductVisible"
             mode="bottom" :mask="true"
             :closeable="false">
      <u-tabs-swiper :show-bar="false" active-color="#fa436a" ref="tabs"
                     :active-item-style="activeItemStyle"
                     :list="noneRefProduceList" :current="current" @change="onTabsChange"
                     :is-scroll="false"></u-tabs-swiper>
      <swiper class="product-box" :current="swiperCurrent" @transition="transition" @change="onSwiperChange" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <u-empty v-if="!(noRelationBudgetProducts===undefined)&&noRelationBudgetProducts.length === 0" mode="order" text="暂无可关联商品" icon-size="80">
          </u-empty>
          <view class="order" v-for="(item,index) in noRelationBudgetProducts" :key="index">
            <view class="item">
              <view class="left"><image :src="item.productThumbnail" @error="item.productThumbnail = errorImgUrl" mode="aspectFill"></image></view>
              <view class="content">
                <view class="title u-line-3">{{ item.productName }}</view>
              </view>
              <view class="right">
                <view class="price">
                  ￥{{item.salePrice | money}}
                </view>
                <view class="number">x{{ item.num }}</view>
              </view>
            </view>
            <view class="totalPrice">
              <view class="combine" v-if="preferential">小计(含服务费和优惠价):<view style="color: #fa436a;display: inline">￥{{getTotalPrice(item)}}{{item.showFreight >0 ?'（含运费）':''}}</view></view>
              <view class="combine" v-else>小计:<view style="color: #fa436a;display: inline">￥{{getTotalPrice(item)}}{{item.showFreight >0 ?'（含运费）':''}}</view></view>
              <view class="uni-num-box">
                <view>未关联数量:<view style="display: inline;font-size: 32rpx;font-weight: bold">{{ item.num-item.relationNum }}</view></view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </u-popup>

    <u-row class="action-section">
        <u-button v-if="showOperationButton && isDone == '0'" :disabled="optionDisabled" :custom-style="customStyle" :ripple="true" @click="doPopupShow(0)">
          拒绝
        </u-button>
        <u-button v-if="showOperationButton && isDone == '0'" :disabled="optionDisabled" :custom-style="customStyle" :ripple="true" @click="doPopupShow(1)">同意</u-button>
      </u-row>
    </view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
import URow from "../../uview-ui/components/u-row/u-row";
import UButton from "../../uview-ui/components/u-button/u-button";
import UPopup from "../../uview-ui/components/u-popup/u-popup";
import UInput from "../../uview-ui/components/u-input/u-input";
import { loadOrderApplyData,getDealLogs,getBudgets,approval } from "@/api/backlog/backlog.js"
import UImage from "../../uview-ui/components/u-image/u-image";
import UIcon from "../../uview-ui/components/u-icon/u-icon";
import UModal from "../../uview-ui/components/u-modal/u-modal";
import {
  errorImgUrl
} from '@/common/utils/config.js';
export default {
  components: {UModal, UIcon, UImage, UInput, UPopup, UButton, URow},
  data() {
    return {
      // 是否为完成审批
      isDone:"",
      approveData:{
        dealResult: 1
      },
      optionDisabled:false,
      showOperationButton:false,
      errorImgUrl: errorImgUrl,
      showPopup:false,
      showButton:true,
      mode:'center',
      // 暂时设置为false
      mask: true,
      preferential:false,
      closeable: true,
      closeIconPos: 'top-right',
      customStyle:{
        border:'#fa436a',
        color:'#ffffff',
        backgroundColor:'#fa436a',
        width:'50%',
      },
      productDetail:{
        border:'#fa436a',
        color:'#ffffff',
        backgroundColor:'#fa436a',
      },
      list: [{
        name: '基本信息'
      }, {
        name: '审批过程'
      }],
      summary: {
        num: 0,
        totalPrice: 0,
        freight: 0,
        amount: 0,
        amountDesc: 0,
      },
      orderApply:{},
      orderItem: [],
      dealLogs:[],
      budgetData:[],
      orderData:[],
      // 关联商品列表
      relationBudgetProducts:[],
      // 关联商品列表title
      refProduceList:[{
        name: '已关联预算的商品列表'
      }],
      // 未关联商品列表

      // 未关联商品列表title
      noneRefProduceList:[{
        name: '未关联预算的商品列表'
      }],
      relationBudgetProductsVisible:false,
      noRelationBudgetProductVisible:false,
      noRelationBudgetProducts:[],
      activeItemStyle:{
        color:''
      },
      titleStyle:{
        width:'60%',
        fontSize:'28rpx',
        color:'#303133'
      },
      labelStyle:{
        fontSize:'28rpx',
        color:'#303133'
      },
      contentStyle:{
        width:'50%'
      },
      valueStyle:{
        borderRadius:'100rpx',
        backgroundColor:'#fa436a',
        color: '#fff',
        width: '62rpx',
        height: '42rpx',
        textAlign: 'center',
        lineHeight: '48rpx',
      },
      // 已关联预算
      refBudget:'',
      // 未关联预算
      noneRefBudget:'',
      // 总金额
      total:'',
      current: 0,
      swiperCurrent: 0,
      dx: 0,
      ztet: ""
    };
  },
  mounted(){
      //主题颜色设置
      console.log('this.themeColor',this.themeColor);
      this.activeItemStyle.color = this.themeColor
      this.customStyle.backgroundColor = this.themeColor
  },
  onLoad(option) {
    this.approveData.applyId = option.applyId;
    this.isDone = option.isDone;
    this.approveData.procInstId = option.procInstId
    this.approveData.workitemId = option.workitemId
    this.approveData.actInstId = option.actInstId
    this.approveData.entityId = option.entityId
    this.ztet = option.ztet
    loadOrderApplyData({applyId:option.applyId}).then(res=>{
      if (res.code === 0){
        this.orderApply = res.data
        this.orderItem = this.orderApply.items
        this.summaryData()
        getBudgets({id:this.orderApply.orderId}).then(response=>{
          if (response.code === 0){
            response.data.budgetData.budgetList.forEach(item=>{
              item.key = item.id
              item.detailList.forEach(item1=>{
                item1.key = item1.id
              })
            })
            this.orderData = response.data.orderData
            this.budgetData = response.data.budgetData
            this.noRelationBudgetProducts = response.data.noRelationBudgetProductList

            if (this.orderData.ext.confService){
              this.preferential = true
            }
            this.refBudget = '已关联预算总金额：¥'+this.budgetData.amount.toFixed(2)
            this.noneRefBudget = '未关联预算总金额：¥'+(this.orderApply.total-this.budgetData.amount).toFixed(2)
            this.total = '总额：￥'+this.orderApply.total

          }
        })
      }
    })
    getDealLogs({procInstId:option.procInstId}).then(res=>{
      if (res.code === 0){
        this.dealLogs = res.data
        this.dealLogs.forEach(log => {
          if(log.processState !== "F"){
            this.showOperationButton = true;
          }
        });
        let indexDeal = this.dealLogs.findIndex( item => item.dealResult === 2 || item.dealResult === 3 )
        this.isCancelOrder = indexDeal > -1;
        //最后两个元素换下位置
        if (this.isCancelOrder){
          this.dealLogs = this.swapArray(this.dealLogs,this.dealLogs.length-2,this.dealLogs.length-1)
        }
      }
    })
  },
  computed: {

  },
  methods: {
			returnIndex() {
        if (this.ztet == '1'){
          uni.reLaunch({
            url: "/pages/index/index"
          })
          return;
        }
				goback()
			},
    close() {
      console.log('close');
    },
    open() {
      console.log('open');
    },
    // 查看商品详情
    doProductDetail(id){
      uni.navigateTo({
        url: `/pages/product/product?id=${id}`
      })
    },
    // 计算总价
    getTotalPrice(record){
      let totalSalePrice = parseFloat(Number(record.num*record.salePrice).toFixed( 2 ));
      let totalServiceFee = parseFloat(Number(record.num*record.serviceFee).toFixed( 2 ));
      let totalPreferentialFee =parseFloat( Number(record.num*record.preferentialFee).toFixed( 2 )) ;
      let total = this.$options.filters['twoBitMoney'](totalSalePrice+totalServiceFee+record.showFreight-totalPreferentialFee);
      return total
    },
    // 查看预算关联商品
    goDetailList(item){
      this.relationBudgetProductsVisible = true
      this.relationBudgetProducts = this.budgetData.budgetList.filter(t=>t.id === item.id)[0].detailList
      this.relationBudgetProducts.forEach(item1=>{
        item1.key = item1.id
      })
    },
    doPopupShow(state){
      this.approveData.dealResult = state
      this.approveData.dealContent = ''
      this.showPopup = true
    },
        backRouter() {
                // #ifdef H5
        let canBack = true
        if (this.ztet == '1'){
          uni.reLaunch({
            url: "/pages/index/index"
          })
          return;
        }
        const pages = getCurrentPages()
                // 有可返回的页面则直接返回，uni.navigateBack默认返回失败之后会自动刷新页面 ，无法继续返回
        if (pages.length > 1) {
                    uni.navigateBack(1)
                    return;
        }
                // vue router 可以返回uni.navigateBack失败的页面 但是会重新加载
        let a = this.$router.go(-1)
                // router.go失败之后则重定向到首页
        if (a == undefined) {
                    uni.reLaunch({
                        url: "/pages/index/index"
                    })
        }
        return;
                // #endif
                uni.navigateBack(1)
      },
    // 提交审批单
    doApprove(){
      if(this.optionDisabled){
        return
      }
      this.optionDisabled = true;
      if (this.approveData.dealResult===0&&this.approveData.dealContent===''){
        this.$api.msg('请填写审批意见');
        this.optionDisabled = false;
        return
      }else {
        approval(this.approveData).then(res=>{
          if (res.code === 0){
            this.showPopup = false
            this.$api.msg('操作成功');
            setTimeout(() => {
              // uni.navigateBack()
              this.backRouter()
              // uni.navigateTo({
              //   url: `/pages/backlog/backlog`
              // })
              this.optionDisabled = false;
            }, 800)
          }
        })
      }
    },
    /**
     * 数组元素交换位置
     * @param {array} arr 数组
     * @param {number} index1 添加项目的位置
     * @param {number} index2 删除项目的位置
     * index1和index2分别是两个数组的索引值，即是两个要交换元素位置的索引值，如1，5就是数组中下标为1和5的两个元素交换位置
     */
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    //数量汇总
    summaryData() {
      this.summary.freight = this.orderApply.freight;
      for (var i = 0; i < this.orderApply.items.length; i++) {
        for (var j = 0; j < this.orderApply.items[i].products.length; j++) {
          this.summary.num += this.orderApply.items[i].products[j].num;
          this.summary.totalPrice +=
              this.orderApply.items[i].products[j].salePrice *
              this.orderApply.items[i].products[j].num;

          if (
              this.orderApply.items[i].products[j].salePrice <
              this.orderApply.items[i].products[j].marketPrice
          ) {
            this.summary.amountDesc +=
                (this.orderApply.items[i].products[j].marketPrice -
                    this.orderApply.items[i].products[j].salePrice) *
                this.orderApply.items[i].products[j].num;
          }
        }
      }
      this.summary.amount = this.summary.totalPrice + this.summary.freight;
      if( this.orderApply.protocolType==='eplus'){
        this.summary.amount = this.summary.amount+this.orderApply.serviceFee-this.orderApply.preferentialFee;
      }
    },
    toast(msg) {
      uni.showToast({
        title: msg,
        duration: 1200,
        mask: false,
        icon: 'none'
      });
    },
    reachBottom() {

    },

    // tab栏切换
    onTabsChange(index) {
      console.log('this.themeColor',this.themeColor);
      this.activeItemStyle.color = this.themeColor
      this.swiperCurrent = index
      this.current = index
    },
    onSwiperChange(item){
      // this.showButton = !this.showButton
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      // this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    }
  }
};
</script>

<style>
page {
  height: 100%;
  background-color: #f2f2f2;
}

</style>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--window-top));
  width: 100%;
}
.product-box {
  flex: 1;
  height: 350px !important;
  background-color: #f5f5f5;
  .swiper-item{
    padding: 20rpx;
    overflow-y:auto;
  }
}
.apply-log-container{
  margin-top: 24px;
  margin-bottom: 60px;
  .log{
    background: #fff;
    padding: 12px;
    width: 90%;
    border-radius: 8px;
    .u-order-font{
      padding-top: 12px;
      color: #9a9a9a;
    }
  }
}

.swiper-box {
  flex: 1;
}
.swiper-item {
  width: 85%;
  height: 100%;
  padding: 20rpx;
}
.u-basic-info{
  margin-top: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 32rpx;
}
.list {
  display: flex;
  align-items: center;
  padding: 20upx 30upx;
  background: #fff;
  position: relative;
}
.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.address-box {
  display: flex;
  align-items: center;

  .address {
    font-size: 30upx;
    color: $font-color-dark;
  }
}
.u-box {
  font-size: 28upx;
  color: $font-color-light;
  //margin-top: 16upx;

  .name {
    margin-right: 30upx;
  }
}
.delete {
  width: 40upx;
  height: 40upx;
  margin-left: 16upx;
}

.uni-tip {
  border-radius: 0px !important;
  overflow: hidden;
  .popup-content {
    font-size: 14px;
    color: #666;
    padding: 10px 0;
    margin: 0 15px;
  }
  .uni-tip-group-button {
    border-top: none;

    .uni-tip-button {
      border-top: 1px solid #e2e2e2;

      &.confirm {
        border-top: 1rpx solid $base-color;
        border-bottom: 1rpx solid $base-color;
        color: #fff;
        background-color: $base-color;
      }
    }
  }
}

.card-title{
  font-weight: bold;
  width: 95%;
  text-align: center
}

.settlement-section {
  margin-top: 16rpx;
  background-color: #fff;
  width: 100%;
  height: fit-content;
  border-radius: 10px;
  padding-top: 4rpx;
  padding-bottom: 14rpx;
  margin-bottom: 100rpx;
}
.yt-list {
  margin-top: 16upx;
  background: #fff;
}

.yt-list-cell {
  display: flex;
  align-items: center;
  padding: 10upx 30upx 10upx 200upx;
  line-height: 70upx;
  position: relative;

  .all{
    font-size: 40upx;
    font-weight: bold;
  }

  &.cell-hover {
    background: #fafafa;
  }

  &.b-b:after {
    left: 30upx;
  }

  .cell-icon {
    height: 32upx;
    width: 32upx;
    font-size: 22upx;
    color: #fff;
    text-align: center;
    line-height: 32upx;
    background: #f85e52;
    border-radius: 4upx;
    margin-right: 12upx;

    &.hb {
      background: #ffaa0e;
    }

    &.lpk {
      background: #3ab54a;
    }

  }

  .cell-more {
    align-self: center;
    font-size: 24upx;
    color: $font-color-light;
    margin-left: 8upx;
    margin-right: -10upx;
  }

  .cell-tit {
    flex: 1;
    font-size: 26upx;
    color: $font-color-dark;
    margin-right: 10upx;
  }

  .cell-tip {
    font-size: 26upx;
    color: $font-color-dark;

    &.disabled {
      color: $font-color-light;
    }

    &.active {
      color: $base-color;
    }

    &.red {
      color: $base-color;
    }
  }

  &.desc-cell {
    .cell-tit {
      max-width: 90upx;
    }
  }

  .desc {
    flex: 1;
    font-size: 26upx;
    color: $font-color-dark;
  }
}


.order {
  background-color: #ffffff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  .top {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .store {
        margin: 0 10rpx;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

  }
  .item {
    display: flex;
    margin: 20rpx 0 0;
      .left {
        margin-right: 20rpx;
        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 10rpx;
        }
      }
      .title {
        font-size: 28rpx;
        line-height: 50rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .right {
        margin-left: auto;
        padding-top: 20rpx;
        text-align: right;
        .price{
          color: #fa436a;
        }
        .decimal {
          font-size: 24rpx;
          margin-top: 4rpx;
        }
        .number {
          color: $u-tips-color;
          font-size: 24rpx;
        }
      }

  }
  .totalPrice {
    display: flex;
    justify-content: space-between;
    .combine{
      margin: auto 0 auto;
      .price{
        color: #fa436a;
        display: inline;
      }
    }
  }

}
.total {
    color: $font-color-light;
    justify-content: flex-end;
    //margin-top: 10rpx;
    display: flex;
    font-size: 24rpx;
    .num{
      color: $font-color-dark;
    }
    .total-price {
      font-size: 32rpx;
      color: $uni-color-primary;
    }
  }
.u-node {
  width: 44rpx;
  height: 44rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
  &.none{

  }
  &.current{
    background: #19be6b;
  }
}
.u-order{
  width: 90%;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
}
.u-order-title {
  color: #333333;
  font-weight: bold;
  font-size: 32rpx;
}
.unacive{
  color: rgb(150, 150, 150);
}
.u-order-title.unacive {
  color: rgb(150, 150, 150);
}
.u-order-reviewer{
  padding-top: 15rpx;
}
.u-order-receiver{
  padding-top: 15rpx;
}
.u-order-apartment{
  padding-top: 15rpx;
}
.u-order-opinion{
  padding-top: 15rpx;
}
.u-order-status{
  padding-top: 15rpx;
}
.u-order-result{
  padding-top: 15rpx;
}
.u-order-desc {
  color: rgb(150, 150, 150);
  font-size: 28rpx;
  display: inline;
  margin-bottom: 6rpx;
}

.tel {
  color: $u-type-primary;
}
.u-order-time {
  padding-top: 15rpx;
  color: rgb(200, 200, 200);
  font-size: 26rpx;
}
.action-section{
  position: fixed;
  margin:auto;
  left:0;
  right:0;
  bottom:0;
}

</style>
